<template>
	<view>
		<tn-nav-bar fixed :bottomShadow="false" backgroundColor="#a74bfd">申请红娘</tn-nav-bar>

		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"></view>

		<view class="" style="position: relative;">
			<view class="">
				<image :src="calcImageSrc('/hong.png')"  mode="widthFix" style="width: 100%;"></image>
			</view>

			<view class="" style="position: absolute;width: 100%;">
				<view class="tn-bg-white tn-padding" style="border-radius: 40rpx;">
					<view class="tn-flex tn-flex-col-center tn-flex-row-between" style="padding: 15rpx 30rpx;">
						<view class="">
							<text class="tn-text-bold">姓名</text>
						</view>
						<view class="">
							<tn-input v-model="name" inputAlign="right" placeholder="请输入您的姓名" />
						</view>
					</view>

					<view class="tn-flex tn-flex-col-center tn-flex-row-between" style="padding: 15rpx 30rpx;">
						<view class="">
							<text class="tn-text-bold">手机号</text>
						</view>

						<view class="">
							<tn-input v-model="mobile" inputAlign="right" placeholder="请输入您的手机号" />
						</view>
					</view>
					<view class="tn-flex tn-flex-col-center tn-flex-row-between" style="padding: 15rpx 30rpx;">
						<view class="">
							<text class="tn-text-bold">登录密码</text>
						</view>
					
						<view class="">
							<tn-input v-model="password" inputAlign="right" placeholder="请输入您的登录密码" />
						</view>
					</view>
					
					<view class="">
						<view class="" style="padding-top: 15rpx; padding-left: 30rpx;">
							<text class="tn-text-bold">申请理由</text>
						</view>
						<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;">
							<textarea style="padding:10rpx;" maxlength="200" placeholder="请输入内容" v-model="liyou"
								placeholder-style="color:#AAAAAA"></textarea>
								
						</view>
					</view>

					<view class="tn-flex tn-flex-col-center" style="padding: 15rpx 0;">
						<view class="tn-margin-left-sm">
							<tn-checkbox-group  @change="tongyiradioGroupChange"
								activeColor="#a74bfd">
								<tn-checkbox  @change="tongyiradioChange" v-for="(item, index) in tongyilist" :key="index"
									:name="item.name" :disabled="item.disabled">
									{{item.name}}
								</tn-checkbox >
							</tn-checkbox-group>
						</view>

						<view class="">
							<text style="color: #a74bfd;">《红娘入驻协议》</text>
						</view>
					</view>

					<view class="tn-flex tn-flex-row-center" style="padding-top: 30rpx;">
						<view class="fixedbox" @click="tijiao()">
							<view class="tn-flex tn-flex-row-center tn-flex-col-center" style="padding-top: 30rpx;">
								<view class="tn-color-white tn-text-bold tn-text-xl">提交</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password:'',
				agree:false,
				mobile:'',
				name:'',
				liyou:'',
				tongyi:false,
				tongyivalue:0,
				tongyilist: [{
					name: '申请即表示您已同意',
					disabled: false
				}],
				list: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				// tn-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				xingbievalue: '男',
				value: '',
				shoujivalue: '',
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			// 选中某个单选框时，由radio时触发
			tongyiradioChange(e) {
				console.log(e);
				this.agree=e.value
			},
			// 选中任一radio时，由radio-group触发
			tongyiradioGroupChange(e) {
				console.log(e);
			},
			async tijiao(){
				if (!this.agree){
					this.msg('请勾选同意协议')
					return
				}
				if (!this.name){
					this.msg('请输入姓名')
					return
				}
				if (!this.password){
					this.msg('请输入密码')
					return
				}
				if (!this.mobile){
					this.msg('请输入手机号')
					return
				}
				if (!this.liyou){
					this.msg('请输入手机号')
					return
				}
				
					let that = this;		
					let result = await that.$request({
						loading:1,
						method: 'post',
						url: '/chat/hongniang/renzheng',
						data: {			
							name:this.name,
							liyou:that.liyou,
							password:that.password,
							mobile:that.mobile,
							liyou:that.liyou							
						}
					});
					
					if (result.statusCode == 200) {
						if (result.data.code == 200) {
							uni.hideLoading()					
							that.msg('申请成功等待审核')											
							that.info()
						} else {
							uni.showToast({
								icon: 'none',
								title: result.data.msg
							});
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: that.$errorMsg
						});
					}
				
				
				
			},
		}
	}
</script>

<style>
	.fixedbox {
		border-radius: 15rpx;
		background: #a74bfd;
		width: 600rpx;
		height: 110rpx;
	}
</style>